﻿@using mscook.mvc;
@model mscook.mvc.Models.HomeModel

@{
    ViewBag.Title = "览月齐鲁";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section JavaScript
{
    <script src="/Scripts/jquery-ui-1.8.21.min.js"></script>
    <script src="Carousel/allinone_thumbnailsBanner.js"></script>
    <script src="Carousel/jquery.featureCarousel.js"></script>
    <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy.js"></script>
    <script src="@Url.Content("~/apps/core.js")"></script>
    <script src="~/bootstrap/js/unslider.js"></script>
    <script type="text/javascript">
        $(function () {

           
            (function () {
                $('body').animate({ scrollTop: $('.navbar').offset().top }, 1000);
            })();//友好的页面显示，全局作用

         

            //KISSY.use('mscook/autoimage/1.0.0/', function () {
            //    arguments[1].init();

            //});
            $.getJSON("Home/SelectImageSetting", function (config) {
                var folder;
                var banner_wid;
                var banner_hei;
                var screen_num;
                function hasFolder(set, folder) {
                    var image_setting = null;
                    $.each(set, function (i, elem) {
                        if (elem.folder == folder) {
                            image_setting = elem;
                            return false;
                        }
                    });
                    return image_setting;
                }
                $.each(config, function (i, item) {
                    //alert(config[i].name);
                    var images = config[i].ImageSettings;
                    //alert(images.folder);
                    //var img_fol = images.folder;
                    switch (checkScreen()) {
                        case "wide":
                            acc_min_width = "115px";
                            screen_num = 7;
                            break;
                        case "pad":
                            acc_min_width = "30px";
                            screen_num = 5;
                            break;
                        case "mobile":
                            acc_min_width = "20px";
                            screen_num = 3;
                            break;
                        default:
                            acc_min_width = "70px";
                            screen_num = 7;
                    }
                    if (images != null && images.length != 0) {
                        var image_setting;
                        if (checkScreen() == "wide" && (image_setting = hasFolder(images, "wide")) !== null) {
                            folder = "wide";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                        } else if (checkScreen() == "pad" && (image_setting = hasFolder(images, "pad")) !== null) {
                            folder = "pad";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                        } else if (checkScreen() == "mobile" && (image_setting = hasFolder(images, "mobile")) !== null) {
                            folder = "mobile";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                        } else {
                            image_setting = hasFolder(images, "default");
                            folder = "default";
                            banner_wid = image_setting.width;

                            banner_hei = image_setting.height;
                        }
                        $('div[data-image-setting=' + config[i].alias + '] img').each(function (i, img) {
                            var $img = $(img);

                            var $slide_li = $img.parent();
                            var source = $img.data("source");
                            if (source) {
                                var data = "Upload/" + folder + "/" + source;
                                if (data) {
                                    $img.attr("data-src", data);
                                    $slide_li.attr("data-bottom-thumb", data);
                                }
                            }
                            $img.unveil();


                        });

                        if (config[i].alias == "Slide") {
                            $('#Banner_simple').allinone_thumbnailsBanner({
                                skin: 'simple',
                                numberOfThumbsPerScreen: screen_num,
                                width: banner_wid,
                                height: banner_hei,
                                thumbsReflection: 0,
                                defaultEffect: 'random'
                            });
                        }
                        if (config[i].alias == "Feature") {
                            $("#featureCarousel").featureCarousel({
                                largeFeatureWidth: banner_wid,
                                largeFeatureHeight: banner_hei,
                                smallFeatureWidth: banner_wid / 2,
                                smallFeatureHeight: banner_hei / 2
                            });
                        }
                    }

                })


                //unslider
                
                var mob_unslider = $('.mob-banner').unslider({
                   //arrows:true
                });

                //$('.unslider-arrow-next').click(function () {
                   // slidey.data('unslider').next();
               // });

               // $('.unslider-arrow').click(function () {
                    //var fn = this.className.split(' ')[1];
                    //  Either do unslider.data('unslider').next() or .prev() depending on the className
                    // mob_unslider.data('Unslider')[fn]();
                   // alert();
                    //mob_unslider.next();
                //});
                //Input placeholder

                //3D Carousel

                //jQueryUI Widgets ——tabs
                //$("#material").tabs({
                //    event: "mouseover",
                //    selected: 1
                //});
                //
                var hdw = $('#material ul li');
                hdw.hover(function () {
                    $(this).addClass('active_back').siblings().removeClass('active_back');
                });
                
                //accordion
                $('#accordion > li').eq(3).width('480px');
                $('#accordion > li').hover(
                        function () {
                            var $this = $(this);
                            $this.stop().animate({ 'width': '480px' }, 500).siblings().stop().animate({ 'width': acc_min_width }, 500);
                            $('.heading', $this).stop(true, true).fadeOut();
                            $('.bgDescription', $this).stop(true, true).slideDown(500);
                            $('.description', $this).stop(true, true).fadeIn();
                        },
                        function () {
                            var $this = $(this);

                            $('.heading', $this).stop(true, true).fadeIn();
                            $('.description', $this).stop(true, true).fadeOut(500);
                            $('.bgDescription', $this).stop(true, true).slideUp(700);
                        });
            });

        });
        //window.onresize = function () { alert("改变大小"); }
    </script>
}
<div class="container">

    
        @if (ViewData[ViewDataKeys.ISLOGIN] != null && ViewData[ViewDataKeys.ISLOGIN].ToString().ToLower() == "false")
        {
            <div class="hidden-desktop mob-login clearfix">
                <div class="mob-login-btn">
                    <a class="btn btn-inverse btn-large" href="@Url.Action("login", "account")">登录</a>
                    <a class="btn btn-large" href="@Url.Action("register", "account")">注册</a>
                </div>
            </div>
        }
   
   
    <div class="mob-banner visible-phone" data-image-setting="Slide">
        <ul>
             @for (int i = 0; i < Model.SlideList.Count; i++)
            {
                var Slide = Model.SlideList.ElementAt(i);
                <li><img src="lazyload/grey.gif" data-source="@Slide.ImageName"/></li>
            }
        </ul>
    </div>
     <div class="clearfix"style="padding-left:10px">
        <div class="span5 hidden-desktop">
            <div class="full-search-bar">
                <div class="search-triggers">
                    <ul class="switchable-nav">
                        <li class="SearchTab selected" data-url="@Url.Action("index", "cookbook")">
                            <a href="javascript:void(0);">新闻</a>
                        </li>

                        <li class="SearchTab" data-url="@Url.Action("index", "material")">
                            <a href="javascript:void(0);">排行</a>
                        </li>

                        <li class="SearchTab" data-url="@Url.Action("index", "chef")">
                            <a href="javascript:void(0);">名人</a>
                        </li>
                    </ul>
                </div>
                <ul class="item-stream unstyled search-input-stream">
                    <li class="stream-item stream-header search-input-item">
                        <form id="phonekeywordSearch" class="form-inline search-form" action="@Url.Action("index", "cookbook")">
                            <input name="keyword" class="xlarge ui-autocomplete-input" id="keyword" role="textbox" aria-haspopup="true"
                                   aria-autocomplete="list" type="text" placeholder="输入您需要看的新闻/名人" autocomplete="off">
                            <button class="btn btn-inverse" id="Button1" type="submit">
                                <i class="icon-search icon-white"></i>
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bannerbox hidden-phone" data-image-setting="Slide">
        <div class="frame960">
            <div id="Banner_simple">
                <ul class="Banner_list">
                    @for (int i = 0; i < Model.SlideList.Count; i++)
                    {
                        var Slide = Model.SlideList.ElementAt(i);
                        <li data-bottom-thumb="Images/slider_img/02_simple.jpg" data-source="@Slide.ImageName" data-text-id="@Html.Encode("#photoText" + i)">
                            <img src="" data-source="@Slide.ImageName" />
                        </li>

                    }
                </ul>
                @{
                    for (int i = 0; i < Model.SlideList.Count; i++)
                    {

                        var item = Model.SlideList.ElementAt(i);

                        <div id="@Html.Encode("photoText" + i)" class="photo_texts">
                            <div class="text_line textElement11_simple" data-initial-left="0" data-initial-top="60" data-final-left="0" data-final-top="320" data-duration="0.5" data-fade-start="0" data-delay="0">
                                @if (!string.IsNullOrEmpty(item.LinkId))
                                {
                                    if (item.LinkType.ToLower().Equals("magazine"))
                                    {
                                        <a href="@Url.Action("inner", "magazine", new { id = item.LinkId })"><span>@Html.Encode(item.Title)</span></a>
                                    }
                                    else
                                    {
                                        <a href="@Url.Action("Read" + item.LinkType, item.LinkType, new { id = item.LinkId })"><span>@Html.Encode(item.Title)</span></a>
                                    }
                                }
                                else
                                {
                                    <span>@Html.Encode(item.Title)</span>
                                }
                            </div>
                        </div>
                    }
                }


                <!--<div id="photoText2" class="photo_texts">
                    <div class="text_line textElement21_simple" data-initial-left="200" data-initial-top="60" data-final-left="45" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <span style="font-weight: bold;">16 TRANSITION EFFECTS<br />
                            FOR IMAGES</span><br />
                        optional can set the transition<br />
                        for each image
                    </div>
                </div>

                <div id="photoText3" class="photo_texts">
                    <div class="text_line textElement31_simple" data-initial-left="70" data-initial-top="160" data-final-left="70" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <span>Animated text from any direction</span><br />
                        <span style="text-transform: uppercase; font-weight: bold;">top, bottom, left<br />
                            and right</span><br />
                        Any color, CSS and HTML formated
                    </div>
                </div>

                <div id="photoText4" class="photo_texts">
                    <div class="text_line textElement41_simple" data-initial-left="100" data-initial-top="60" data-final-left="480" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <span style="text-transform: uppercase; font-weight: bold;">16 transition effects<br />
                            for images</span><br />
                        optional can set the transition<br />
                        for each image
                    </div>
                </div>

                <div id="photoText5" class="photo_texts">
                    <div class="text_line textElement51_simple" data-initial-left="0" data-initial-top="200" data-final-left="0" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <span style="font-weight: bold; text-transform: uppercase;">Up to 4 types of <a href="http://www.17sucai.com" target="_blank">sliders</a></span><br />
                        Each with multiple skins
                    </div>
                </div>-->

            </div>
        </div>
    </div>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
=================================          ================= -->

<div class="container marketing">
    <!-- title -->
    <div class="last_title visible-phone">
        <h3 class="span3 clearfix textline">
            <a href="@Url.Action("index", "cookbook")">[新闻精选]</a>
        </h3>
    </div>
    <div class="last_title hidden-phone">
        <div class="row">
            <h3 class="offset2 span3">聚焦热点新闻</h3>
            <h1 class=" span1"><a href="@Url.Action("index", "cookbook")">鲁</a></h1>
            <h3 class="span2">第一眼</h3>
            <div class="clearfix"></div>
            <h3 class="span3 offset4">关心国内外大事</h3>
            <h1 class="span1"><a href="@Url.Action("index", "cookbook")">览</a></h1>
            <h3 class="span3">足不出户</h3>
            @*<h1 class="offset2 span1"><a href="@Url.Action("index", "cookbook")">聚</a></h1>*@

            <div class="clearfix"></div>
            @*<h1 class="offset4 span1"><a href="@Url.Action("index", "cookbook")"></a></h1>*@



        </div>
    </div>
    <!-- featureCarousel.3D -->
    <div class="ms_featureCarousel hidden-phone" data-image-setting="Feature">
        <div id="featureCarousel">
            @foreach (var Feature in Model.FeatureList)
            {

                <div class="feature">
                    @if (!string.IsNullOrEmpty(Feature.LinkId))
                    {
                        if (Feature.LinkType.ToLower().Equals("magazine"))
                        {
                            <a href="@Url.Action("inner", "magazine", new { id = Feature.LinkId })">
                                <img src="lazyload/grey.gif" data-source="@Feature.ImagePath" />
                            </a>
                        }
                        else
                        {
                            <a href="@Url.Action("Read" + Feature.LinkType, Feature.LinkType, new { id = Feature.LinkId })">
                                <img src="lazyload/grey.gif" data-source="@Feature.ImagePath" />
                            </a>
                        }
                    }
                    else
                    {
                        <img src="lazyload/grey.gif" data-source="@Feature.ImagePath" />
                    }
                    <div>
                        <p>
                            @Html.Encode(Feature.Title)
                        </p>
                    </div>
                </div>

            }
        </div>
    </div>
    <!-- recipes -->
    <div class="row recipes" data-image-setting="CookBook">
        @foreach (var CookBook in Model.CookBookList)
        {
            <div class="span3 list">
                <div class="img">
                    @if (CookBook.ResourceBonusSetting == null || CookBook.ResourceBonusSetting.Bonus == 0 || (Model.LoginUser != null && (Model.LoginUser.IsVip || Model.LoginUser.hasPurchased(CookBook.Id))))
                    {
                        <a href="@Url.Action("ReadCookBook", "cookbook", new { id = CookBook.Id })" class="">
                            <img src="lazyload/grey.gif" data-source="@CookBook.ImageName" />
                        </a>
                    }
                    else
                    {
                        if (Model.LoginUser == null)
                        {
                            <a href="#dialog-form-login" data-toggle="modal" class="">
                                <img src="lazyload/grey.gif" data-source="@CookBook.ImageName" />
                            </a>
                        }
                        else
                        {
                            <a href="#" data-url="@Url.Action("ReadCookBook", "cookbook", new { id = CookBook.Id })" data-bonus="@CookBook.AbsBonus" data-message="@Html.Encode("您确定要购买" + (CookBook.Chef == null ? "" : ("由 " + CookBook.Chef.Name + " 创作的 ")) + CookBook.Name)" data-resource="@CookBook.Id" class="needBonus">
                                <img src="lazyload/grey.gif" data-source="@CookBook.ImageName" />
                            </a>
                        }
                    }
                </div>
                <div class="info2">
                </div>
                <div class="info1">
                    <h4>
                        @Html.Encode(CookBook.Name)
                    </h4>
                    @{
            bool isNull = CookBook.Chef == null;
            <a href="@Html.Encode(isNull ? "#" : Url.Action("readchef", "chef", new { id = CookBook.Chef.Id }))" class="s_name">@Html.Encode(isNull ? "览月齐鲁" : ("作者:" + CookBook.Chef.Name))</a>
                    }
                </div>
            </div>
        }
        
    </div>
    
    
</div>

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/bootstrap-ie.js"></script>
<![endif]-->
